<template>
  <div v-loading="loading.isLoading" element-loading-text="正在进行预测,请稍等...">
    <el-card class="prediction-card" shadow="hover">
      <h4 style="text-align: center;font-weight: bold">薪资预测</h4>
      <div class="form-container">
        <el-form ref="jobForm" :model="jobForm" label-width="100px">
          <el-form-item label="地区" required>
            <el-cascader
                placeholder="请选择地区"
                v-model="jobForm.city"
                :options="options.CityOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
              <template slot-scope="{ node }">
                <i class="iconfont icon-fenlei-remen" v-if="node.data.label==='热门'" style="color: red"></i>
                {{ node.label }}
              </template>
            </el-cascader>
          </el-form-item>
          <el-form-item label="学历" required>
            <el-select
                placeholder="请选择学历"
                :props="{ expandTrigger: 'hover'}"
                clearable
                v-model="jobForm.education"
                filterable>
              <el-option
                  v-for="item in options.EducationOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职业" required>
            <el-cascader
                placeholder="请选择职业"
                v-model="jobForm.position"
                :options="options.PositionOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
            </el-cascader>
          </el-form-item>
          <el-form-item label="工作类型" required>
            <el-cascader
                placeholder="请选择工作类型"
                v-model="jobForm.work_type"
                :options="options.WorkTypeOption"
                :props="{ expandTrigger: 'hover',emitPath:false}"
                clearable
                filterable>
            </el-cascader>
          </el-form-item>
          <el-form-item label="工作经验" required>
            <el-select
                placeholder="请选择工作经验"
                v-model="jobForm.work_exp"
                :props="{ expandTrigger: 'hover'}"
                clearable
                filterable>
              <el-option
                  v-for="item in options.WorkExperienceOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="predict()" :loading="loading.queryLoading" style="width: 75%">薪资预测
            </el-button>
          </el-form-item>


        </el-form>
      </div>
      <div v-show="isShow" class="predictSalaryText">
        根据计算,月薪预测为:{{ predictSalaryText }}
      </div>
    </el-card>
  </div>
</template>

<script>

import {PredictSalary} from "@/API/api";

export default {
  data() {
    return {
      loading: {
        isLoading: false,
        preText: "预测薪资",
        progress: 0
      },
      predictSalaryText: '',
      isShow: false,
      jobForm: {
        education: [],
        position: [],
        city: [],
        work_exp: [],
        work_type: []
      },
      options: {
        WorkExperienceOption: [],
        EducationOption: [],
        PositionOption: [],
        WorkTypeOption: [],
        CityOption: []
      },

    };
  },
  methods: {
    predict() {
      if (!Object.values(this.jobForm).every(value => value)) {
        this.$message({
          type: "warning",
          message: "存在缺失信息,请填写完整!"
        })
        return
      }
      this.loading.isLoading = true
      this.$api.PredictSalary(this.jobForm).then(rep => {
        this.predictSalaryText = `${rep.data.data[0]}~${rep.data.data[1]}`
        this.isShow = true
      }).finally(() => {
        setTimeout(() => {
          this.loading.isLoading = false
        }, 500)
      })
    },
    getGenericsSelect() {
      for (let key of Object.keys(this.options)) {
        this.$api.getGenericSelect({params: {"type": key.replace('Option', '')}}).then(rep => {
          this.options[key] = rep.data
        })
      }
    },
  },
  beforeMount() {
    this.getGenericsSelect()
  },
  watch: {
    'loading.isLoading': {
      immediate: true,
      handler(newValue) {
        this.loading.preText = newValue ? '正在预测中,请稍等...' : "预测薪资"
      }
    }
  },

};
</script>

<style scoped>
.prediction-card {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-container {
  width: 100%;
}

.el-form-item {
  margin-bottom: 12px;
}

.el-button {
  width: 100%;
}

.predictSalaryText {
  letter-spacing: 0.2rem;
  font-size: 1.5rem;
  background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;

}


</style>
